import { deepClone, getUuiKey } from "./index"
import { styleObj } from "./style"
import { onCreated, onMounted, onBlur, onFocus, onClick, onChange, onInput, onClear, onConfirm, eventList } from "./event"

// const styleObj = deepClone(style)
// 表单属性【右面板】
export let formConf = {
  formRef: 'elForm',
  formModel: 'formData',
  size: 'medium',
  labelPosition: 'right',
  labelWidth: 100,
  formRules: 'rules',
  disabled: false,
  // span: 24,
  formBtns: true,
  unFocusedComponentBorder: true,
  cssList: [{ "name": getUuiKey(), "code": "color:red;" }],
  eventList: eventList,
}

// 输入型组件 【左面板】
export let inputComponents = [
  {
    // 组件的自定义配置
    __config__: {
      label: '单行输入框',
      labelWidth: null,
      showLabel: true,
      changeTag: true,
      tag: 'form-input',
      tagType: 'input',
      tagIcon: 'input',
      defaultValue: undefined,
      required: true,
      tagType: 'input',
      span: 24,
      // 正则校验规则
      regList: []
    },
    __slot__: {
      prepend: "",
      append: "",
    },
    // 其余的为可直接写在组件标签上的属性
    placeholder: '请输入',
    clearable: true,
    'prefix-icon': '',
    'suffix-icon': '',
    maxlength: 255,
    'show-word-limit': false,
    disabled: false, // 编辑状态禁用
    readonly: false, // 编辑状态的只读
    showonly: false, // 只显示详情状态（非编辑状态）
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onChange, onInput, onClear },
    styleObj, // 样式配置
  },
  {
    __config__: {
      label: '多行输入框',
      labelWidth: null,
      showLabel: true,
      tag: 'form-input',
      tagIcon: 'textarea',
      defaultValue: undefined,
      required: true,
      tagType: 'input',
      span: 24,
      regList: [],
      changeTag: true,
    },
    type: 'textarea',
    placeholder: '请输入',
    autosize: {
      minRows: 4,
      maxRows: 4
    },
    maxlength: 20000,
    'show-word-limit': false,
    readonly: false,
    disabled: false,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onChange, onInput, onClear },

    styleObj, // 样式配置
  },
  // {
  //   // 组件的自定义配置
  //   __config__: {
  //     label: '自动补全',
  //     labelWidth: null,
  //     showLabel: true,
  //     changeTag: true,
  //     tag: 'form-autocomplete',
  //     tagType: 'input',
  //     tagIcon: 'input',
  //     defaultValue: undefined,
  //     required: true,
  //     tagType: 'input',
  //     span: 24,
  //     // 正则校验规则
  //     regList: []
  //   },
  //   __slot__: {
  //     prepend: "",
  //     append: "",
  //   },
  //   // 其余的为可直接写在组件标签上的属性
  //   placeholder: '请输入',
  //   clearable: true,
  //   'prefix-icon': '',
  //   'suffix-icon': '',
  //   maxlength: 255,
  //   'show-word-limit': false,
  //   disabled: false, // 编辑状态禁用
  //   readonly: false, // 编辑状态的只读
  //   showonly: false, // 只显示详情状态（非编辑状态）
  //   isHide: false, // 是否隐藏
  // isLock: false, // 是否锁定
  //   event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onChange, onInput, onClear },
  //   styleObj, // 样式配置
  //   "dataObj": {
  //     type: 'static',
  //     "url": "",
  //     "method": "get",
  //     "request": {},
  //     "response": "// response 为接口请求成功时返回的数据",
  //     "error": "// error 为接口请求失败时返回的数据",
  //     props: {
  //       // label: 'label',
  //       value: 'value',
  //     },
  //     value: [{ value: '数据1' }, { value: '数据2' }, { value: '数据3' }], // 静态数据
  //   },
  // },
  // {
  //   __config__: {
  //     label: '密码',
  //     showLabel: true,
  //     labelWidth: null,
  //     changeTag: true,
  //     tag: 'form-input',
  //     tagIcon: 'password',
  //     defaultValue: undefined,
  //     tagType:'input',
  //     span: 24,
  //     required: true,
  //     regList: [],

  //   },
  //   __slot__: {
  //     prepend: '',
  //     append: ''
  //   },
  //   placeholder: '请输入',
  //   'show-password': true,
  //   clearable: true,
  //   'prefix-icon': '',
  //   'suffix-icon': '',
  //   maxlength: null,
  //   'show-word-limit': false,
  //   readonly: false,
  //   disabled: false,
  // isHide: false, // 是否隐藏
  // isLock: false, // 是否锁定
  // },
  {
    __config__: {
      label: '数字输入框',
      showLabel: true,
      changeTag: true,
      labelWidth: null,
      tag: 'form-input-number',
      tagIcon: 'number',
      defaultValue: undefined,
      span: 24,
      tagType: 'input',
      // required: true,
      regList: [],
    },
    placeholder: '',
    min: undefined,
    max: undefined,
    step: 1,
    'step-strictly': false,
    precision: undefined,
    'controls-position': '',
    disabled: false,
    readonly: false,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onChange },

    styleObj, // 样式配置
  },
  {
    __config__: {
      label: '富文本输入框',
      showLabel: true,
      changeTag: true,
      labelWidth: null,
      tag: 'form-rich-text',
      tagIcon: 'rich-text',
      defaultValue: null,
      span: 24,
      tagType: 'input',
      required: true,
      regList: [],
    },
    placeholder: '请输入',
    // height: 250, // 编辑器高度
    disabled: false,
    readonly: false,
    maxlength: '20000',
    transcoding: true,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onInput },

    styleObj, // 样式配置

  }
]

// 选择型组件 【左面板】
export let selectComponents = [
  {
    __config__: {
      label: '下拉选择',
      showLabel: true,
      labelWidth: null,
      tag: 'form-select',
      tagIcon: 'select',
      tagType: 'select',
      tagType: 'select',
      span: 24,
      required: true,
      regList: [],
      changeTag: true,
    },
    placeholder: '请选择',
    clearable: true,
    disabled: false,
    readonly: false,
    filterable: false,
    multiple: false,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    // multiple: false,
    "dataObj": {
      type: 'static',
      "url": "",
      "method": "get",
      "request": {},
      "response": "// response 为接口请求成功时返回的数据",
      "error": "// error 为接口请求失败时返回的数据",
      valueType: 'list', // 静态数据进行增删操作的组件类型
      props: {
        label: 'label',
        value: 'value',
      },
      value: [{
        label: '选项一',
        value: '1'
      }, {
        label: '选项二',
        value: '2'
      }], // 静态数据
    },
    event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onChange, onClear },
    styleObj, // 样式配置

  },
  {
    __config__: {
      label: '级联选择',
      // url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/cascaderList',
      // method: 'get',
      // dataPath: 'list',
      showLabel: true,
      labelWidth: null,
      tag: 'form-cascader',
      tagIcon: 'cascader',
      tagType: 'select',
      defaultValue: [],
      span: 24,
      required: true,
      regList: [],
      changeTag: true,
    },
    placeholder: '请选择',
    'show-all-levels': true,
    disabled: false,
    readonly: false,
    clearable: true,
    filterable: false,
    separator: '/',
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onChange, onClear },

    styleObj, // 样式配置
    // multiple: false,
    "dataObj": {
      type: 'static',
      "url": "",
      "method": "get",
      "request": {},
      "response": "// response 为接口请求成功时返回的数据",
      "error": "// error 为接口请求失败时返回的数据",
      valueType: 'tree', // 静态数据进行增删操作的组件类型
      props: {
        label: 'label',
        value: 'value',
        children: 'children'
      },
      value: [{
        value: '1',
        label: '选项1',
        children: [{
          value: '2',
          label: '选项1-1',
        }]
      }], // 静态数据
    },
  },
  {
    __config__: {
      label: '单选框组',
      labelWidth: null,
      showLabel: true,
      tag: 'form-radio-group',
      tagIcon: 'radio',
      changeTag: true,
      defaultValue: undefined,
      tagType: 'select',
      span: 24,
      optionType: 'default',
      regList: [],
      required: true,
      border: false,
    },
    style: {},
    size: 'medium',
    disabled: false,
    readonly: false,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    "dataObj": {
      type: 'static',
      "url": "",
      "method": "get",
      "request": {},
      "response": "// response 为接口请求成功时返回的数据",
      "error": "// error 为接口请求失败时返回的数据",
      valueType: 'list', // 静态数据进行增删操作的组件类型
      props: {
        label: 'label',
        value: 'value',
      },
      value: [{
        label: '选项一',
        value: '1'
      }, {
        label: '选项二',
        value: '2'
      }], // 静态数据
    },
    event: { eventName: "", onCreated, onMounted, onChange },

    styleObj, // 样式配置

  },
  {
    __config__: {
      label: '多选框组',
      tag: 'form-checkbox-group',
      tagIcon: 'checkbox',
      defaultValue: '',
      span: 24,
      showLabel: true,
      labelWidth: null,
      tagType: 'select',
      optionType: 'default',
      required: true,
      regList: [],
      changeTag: true,
      border: false,
    },
    style: {},
    size: 'medium',
    min: null,
    max: null,
    disabled: false,
    readonly: false,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    "dataObj": {
      type: 'static',
      "url": "",
      "method": "get",
      "request": {},
      "response": "// response 为接口请求成功时返回的数据",
      "error": "// error 为接口请求失败时返回的数据",
      valueType: 'list', // 静态数据进行增删操作的组件类型
      props: {
        label: 'label',
        value: 'value',
      },
      value: [{
        label: '选项一',
        value: '1'
      }, {
        label: '选项二',
        value: '2'
      }], // 静态数据
    },
    event: { eventName: "", onCreated, onMounted, onChange },

    styleObj, // 样式配置

  },
  {
    __config__: {
      label: '开关',
      tag: 'form-switch',
      tagIcon: 'switch',
      defaultValue: false,
      span: 24,
      showLabel: true,
      labelWidth: null,
      tagType: 'select',
      // required: true,
      // regList: [],
      changeTag: true,
    },
    style: {},
    disabled: false,
    readonly: false,
    'active-text': '',
    'inactive-text': '',
    'active-color': null,
    'inactive-color': null,
    'active-value': true,
    'inactive-value': false,
    isHide: false,

    event: { eventName: "", onCreated, onMounted, onChange },

    styleObj, // 样式配置

  },
  {
    __config__: {
      label: '滑块',
      tag: 'form-slider',
      tagIcon: 'slider',
      defaultValue: null,
      span: 24,
      showLabel: true,
      tagType: 'select',
      labelWidth: null,
      required: true,
      regList: [],
      changeTag: true,
    },
    disabled: false,
    readonly: false,
    min: 0,
    max: 100,
    step: 1,
    'show-stops': false,
    range: false,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onChange },

    styleObj, // 样式配置

  },
  {
    __config__: {
      label: '时间选择',
      tag: 'form-time-picker',
      tagIcon: 'time',
      defaultValue: null,
      defaultValueHidden: true, // 默认值输入框隐藏
      span: 24,
      showLabel: true,
      tagType: 'select',
      labelWidth: null,
      required: true,
      regList: [],
      changeTag: true,
    },
    placeholder: '请选择',
    disabled: false,
    readonly: false,
    clearable: true,
    'picker-options': {
      selectableRange: '00:00:00-23:59:59'
    },
    format: 'HH:mm:ss',
    'value-format': 'HH:mm:ss',
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onChange, onClear },

    styleObj, // 样式配置

  },
  {
    __config__: {
      label: '时间区间',
      tag: 'form-timerange-picker',
      tagIcon: 'time-range',
      span: 24,
      showLabel: true,
      labelWidth: null,
      tagType: 'select',
      defaultValue: null,
      defaultValueHidden: true, // 默认值输入框隐藏
      required: true,
      regList: [],
      changeTag: true,
    },
    disabled: false,
    readonly: false,
    clearable: true,
    'is-range': true,
    'range-separator': '至',
    'start-placeholder': '开始时间',
    'end-placeholder': '结束时间',
    format: 'HH:mm:ss',
    'value-format': 'HH:mm:ss',
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onChange, onClear },

    styleObj, // 样式配置

  },
  {
    __config__: {
      label: '日期选择',
      tag: 'form-date-picker',
      tagIcon: 'date',
      defaultValue: null,
      defaultValueHidden: true, // 默认值输入框隐藏
      showLabel: true,
      labelWidth: null,
      span: 24,
      tagType: 'select',
      required: true,
      regList: [],
      changeTag: true,
    },
    placeholder: '请选择',
    type: 'date',
    disabled: false,
    clearable: true,
    format: 'yyyy-MM-dd',
    'value-format': 'yyyy-MM-dd',
    readonly: false,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onChange, onClear },

    styleObj, // 样式配置

  },
  {
    __config__: {
      label: '日期区间',
      tag: 'form-daterange-picker',
      tagIcon: 'date-range',
      defaultValue: null,
      defaultValueHidden: true, // 默认值输入框隐藏
      span: 24,
      showLabel: true,
      labelWidth: null,
      required: true,
      tagType: 'select',
      regList: [],
      changeTag: true,
    },
    type: 'daterange',
    'range-separator': '至',
    'start-placeholder': '开始日期',
    'end-placeholder': '结束日期',
    disabled: false,
    clearable: true,
    format: 'yyyy-MM-dd',
    'value-format': 'yyyy-MM-dd',
    readonly: false,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onChange, onClear },

    styleObj, // 样式配置

  },
  {
    __config__: {
      label: '日期时间选择',
      tag: 'form-date-picker',
      tagIcon: 'date',
      defaultValue: null,
      defaultValueHidden: true, // 默认值输入框隐藏
      showLabel: true,
      labelWidth: null,
      span: 24,
      tagType: 'select',
      required: true,
      regList: [],
      changeTag: true,
    },
    placeholder: '请选择',
    type: 'datetime',
    disabled: false,
    clearable: true,
    format: 'yyyy-MM-dd HH:mm:ss',
    'value-format': 'yyyy-MM-dd HH:mm:ss',
    readonly: false,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onChange, onClear },

    styleObj, // 样式配置

  },
  {
    __config__: {
      label: '日期时间区间',
      tag: 'form-daterange-picker',
      tagIcon: 'date-range',
      defaultValue: null,
      defaultValueHidden: true, // 默认值输入框隐藏
      span: 24,
      showLabel: true,
      labelWidth: null,
      required: true,
      tagType: 'select',
      regList: [],
      changeTag: true,
    },
    type: 'datetimerange',
    'range-separator': '至',
    'start-placeholder': '开始日期',
    'end-placeholder': '结束日期',

    clearable: true,
    format: 'yyyy-MM-dd HH:mm:ss',
    'value-format': 'yyyy-MM-dd HH:mm:ss',
    disabled: false, // 编辑状态禁用
    readonly: false, // 编辑状态的只读
    showonly: false, // 只显示详情状态（非编辑状态）
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onBlur, onFocus, onChange, onClear },

    styleObj, // 样式配置

  },
  {
    __config__: {
      label: '评分',
      tag: 'form-rate',
      tagIcon: 'rate',
      defaultValue: 0,
      span: 24,
      showLabel: true,
      labelWidth: null,
      tagType: 'select',
      required: true,
      regList: [],
      changeTag: true,
    },
    style: {},
    max: 5,
    'allow-half': false,
    'show-text': false,
    'show-score': false,
    disabled: false,
    readonly: false,
    color: '#F7BA2A',
    voidColor: '#C6D1DE',
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onChange },

    styleObj, // 样式配置

  },
  {
    __config__: {
      label: '签名',
      tag: 'form-signature',
      tagIcon: 'signature',
      defaultValue: null,
      defaultValueHidden: true,
      span: 24,
      showLabel: true,
      labelWidth: null,
      tagType: 'select',
      required: true,
      regList: [],
      changeTag: true,
    },
    placeholder: '点击签名',
    disabled: false,
    readonly: false,
    // width: 400,
    // height: 300,
    bgColor: '', // 背景颜色
    lineWidth: 4, // 画笔粗细
    lineColor: "#000", // 画笔颜色
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    event: { eventName: "", onCreated, onMounted, onConfirm },
    styleObj, // 样式配置
  },
  // {
  //   __config__: {
  //     label: '颜色选择',
  //     tag: 'form-color-picker',
  //     tagIcon: 'color',
  //     span: 24,
  //     defaultValue: null,
  //     showLabel: true,
  //     labelWidth: null,
  //     tagType: 'select',
  //     required: true,
  //     regList: [],
  //     changeTag: true,
  //   },
  //   'show-alpha': false,
  //   'color-format': '',
  //   disabled: false,
  //   readonly: false,
  //   size: 'medium',
  //   isHide: false, // 是否隐藏
  // isLock: false, // 是否锁定
  //   event: { eventName: "", onCreated, onMounted, onChange },
  //   styleObj, // 样式配置
  // },
  {
    __config__: {
      label: '附件',
      tag: 'form-upload',
      tagIcon: 'upload',
      tagType: 'select',
      defaultValue: null,
      defaultValueHidden: true, // 默认值输入框隐藏
      showLabel: true,
      labelWidth: null,
      required: true,
      span: 24,
      showTip: true,
      regList: [],
      changeTag: true,
      fileSize: 2,
      sizeUnit: 'MB',
    },
    action: '/ECS/sys/file/upload',
    download: '/ECS/sys/file/download',
    dName: 'fileId',
    disabled: false,
    readonly: false,
    accept: '',
    limit: 10,
    name: 'multipartFiles',
    multiple: true,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    event: { eventName: "", onCreated, onMounted, onChange },
    styleObj, // 样式配置
  },
  {
    __config__: {
      label: '图片',
      tag: 'form-image',
      tagIcon: 'image',
      tagType: 'select',
      defaultValue: null,
      defaultValueHidden: true, // 默认值输入框隐藏
      showLabel: true,
      labelWidth: null,
      required: true,
      span: 24,
      showTip: true,
      regList: [],
      changeTag: true,
      fileSize: 2,
      sizeUnit: 'MB',
    },
    disabled: false,
    readonly: false,
    limit: 10,
    multiple: true,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    event: { eventName: "", onCreated, onMounted, onChange },

    styleObj, // 样式配置
  },
  {
    __config__: {
      label: '人员选择',
      tag: 'form-user-picker',
      tagIcon: 'person',
      tagType: 'select',
      defaultValue: null,
      defaultValueHidden: true, // 默认值输入框隐藏
      showLabel: true,
      labelWidth: null,
      required: true,
      span: 24,
      regList: [],
      changeTag: true,
    },
    disabled: false,
    readonly: false,
    multiple: false,
    placeholder: '请选择人员',
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    event: { eventName: [], onCreated, onMounted, onConfirm },
    styleObj, // 样式配置
    "dataObj": {
      type: 'dynamic',
      props: {
        // 请求数据映射
        request: {
          deptId: 'deptId'
        },
        // 响应数据映射
        response: {
          id: 'id',
          name: 'name',
          type: 'type',
          avatar: 'avatar',
        }
      },
      "url": "/ECS/oa/org/tree",
      "method": "get",
      "request": { type: 'user' },
      "response": "// response 为接口请求成功时返回的数据",
      "error": "// error 为接口请求失败时返回的数据",
      value: [], // 静态数据
    },
  },
  // {
  //   __config__: {
  //     label: '部门选择',
  //     tag: 'form-org-picker',
  //     tagIcon: 'dept',
  //     tagType: 'select',
  //     defaultValue: null,
  //     defaultValueHidden: true, // 默认值输入框隐藏
  //     showLabel: true,
  //     labelWidth: null,
  //     required: true,
  //     span: 24,
  //     regList: [],
  //     changeTag: true,
  //   },

  //   disabled: false,
  //   readonly: false,
  //   multiple: false,
  //   // enablePrint: true, // 可打印
  //   placeholder: '请选择部门',
  //   isHide: false, // 是否隐藏
  // isLock: false, // 是否锁定,
  //   
  //   event: { eventName:"", onCreated, onMounted, onConfirm },
  //   
  //   styleObj, // 样式配置
  //   "dataObj": {
  //     type: 'dynamic',
  //     "url": "/ECS/oa/org/tree",
  //     props: {
  //       // 请求数据映射
  //       request: {
  //         deptId: 'deptId'
  //       },
  //       // 响应数据映射
  //       response: {
  //         id: 'id',
  //         name: 'name',
  //         type: 'type',
  //         avatar: 'avatar',
  //       }
  //     },
  //     "method": "get",
  //     "request": { type: 'dept' },
  //     "response": "// response 为接口请求成功时返回的数据",
  //     "error": "// error 为接口请求失败时返回的数据",
  //   },
  // },
  {
    __config__: {
      label: '数据表格',
      tag: 'form-table',
      tagIcon: 'table',
      // defaultValue: null,
      span: 24,
      showLabel: false,
      tagType: 'select',
      labelWidth: null,
      changeTag: true,
    },
    "dataObj": {
      type: 'static',
      "url": "",
      "method": "get",
      "request": {
        // page: 1,
        // size: 10
      },
      "response": "// response 为接口请求成功时返回的数据",
      "error": "// error 为接口请求失败时返回的数据",
      head: [
        { prop: 'date', label: '日期', width: '150', align: 'center', render: 'text', hide: false },
        { prop: 'image', label: '头像', width: '100', align: 'center', render: 'img', hide: false },
        { prop: 'name', label: '名称', width: '150', align: 'center', render: 'tag', hide: false },
        { prop: 'address', label: '地址', width: '300', align: 'center', render: 'text', hide: false },
      ],
      value: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }], // 静态数据
    },
    stripe: false,
    border: false,
    size: 'medium',
    showHeader: true,
    // 'highlight-current-row': false,
    color: '#e8eefc',
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定

    styleObj, // 样式配置
  },
]

// 布局型组件 【左面板】
export let layoutComponents = [
  {
    __config__: {
      tag: 'form-row-container',
      tagType: 'layout',
      tagType: 'layout',
      tagIcon: 'row',
      label: '行容器',
      layoutTree: true,
    },
    type: 'default',
    justify: 'start',
    align: 'top',
    gutter: 20,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    children: [],
    allowDrop: true, // 拖拽时判定目标节点能否被放置
    className: [],
    styleObj,
  },
  {
    __config__: {
      tag: 'form-table-container',
      tagType: 'layout',
      tagIcon: 'table-edit',
      label: '表格布局',
      layoutTree: true,
    },
    borderWidth: 1,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    // cellspacing: 0,
    cellpadding: 8,
    tableAlign: 'center',
    borderColor: '#ebeef5',
    className: [],
    styleObj,
    children: [
      {
        id: 'tr_' + getUuiKey(),
        style: {},
        children: [
          {
            colspan: 1,
            rowspan: 1,
            children: [],
            id: 'td_' + getUuiKey(),
            width: 50,
            style: {},
            allowDrop: true, // 拖拽时判定目标节点能否被放置

          },
          {
            colspan: 1,
            rowspan: 1,
            children: [],
            id: 'td_' + getUuiKey(),
            width: 50,
            style: {},
            allowDrop: true, // 拖拽时判定目标节点能否被放置
          },
        ]
      },
      {
        id: 'tr_' + getUuiKey(),
        style: {},
        children: [
          {
            colspan: 1,
            rowspan: 1,
            children: [],
            id: 'td_' + getUuiKey(),
            width: 50,
            style: {},
            allowDrop: true, // 拖拽时判定目标节点能否被放置
          },
          {
            colspan: 1,
            rowspan: 1,
            children: [],
            id: 'td_' + getUuiKey(),
            width: 50,
            style: {},
            allowDrop: true, // 拖拽时判定目标节点能否被放置
          },
        ]
      },

    ]
  },
  {
    __config__: {
      tag: 'form-tabs-container',
      tagType: 'layout',
      tagIcon: 'tabs',
      label: '标签页',
      layoutTree: true,
      defaultValue: '1',
      isStage: true, // 是否为分阶段的组件
    },
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    children: [{
      "label": "标签一",
      value: "1",
      "children": [],
      allowDrop: true, // 拖拽时判定目标节点能否被放置
    }, {
      "label": "标签二",
      value: "2",
      "children": [],
      allowDrop: true, // 拖拽时判定目标节点能否被放置
    },],
    type: '',
    className: [],
    styleObj,
  },
  // {
  //   __config__: {
  //     tag: 'form-collapse',
  //     tagType: 'layout',
  //     tagIcon: 'collapse',
  //     label: '折叠面板',
  //     layoutTree: true,
  //     defaultValue: '1',
  //     isStage: true, // 是否为分阶段的组件
  //   },
  //   children: [{
  //     "label": "面板一",
  //     value: "1",
  //     "children": [],
  //     allowDrop: true, // 拖拽时判定目标节点能否被放置
  //   }, {
  //     "label": "面板二",
  //     value: "2",
  //     "children": [],
  //     allowDrop: true, // 拖拽时判定目标节点能否被放置
  //   },],
  //   className: [],
  //   styleObj,
  //   type: '',
  //   isHide: false, // 是否隐藏
  // isLock: false, // 是否锁定
  // },
  // {
  //   __config__: {
  //     tag: 'form-steps',
  //     tagType: 'layout',
  //     tagIcon: 'steps',
  //     label: '分步表单',
  //     layoutTree: true,
  //     defaultValue: '1',
  //     isStage: true, // 是否为分阶段的组件
  //   },
  //   children: [{
  //     "label": "步骤1",
  //     value: "1",
  //     "children": [],
  //     allowDrop: true, // 拖拽时判定目标节点能否被放置
  //   }, {
  //     "label": "步骤2",
  //     value: "2",
  //     "children": [],
  //     allowDrop: true, // 拖拽时判定目标节点能否被放置
  //   }, {
  //     "label": "步骤3",
  //     value: "3",
  //     "children": [],
  //     allowDrop: true, // 拖拽时判定目标节点能否被放置
  //   },],
  //   className: [],
  //   styleObj,
  //   simple: false,
  //   isHide: false, // 是否隐藏
  // isLock: false, // 是否锁定
  //   // direction: 'horizontal'
  // },
  {
    __config__: {
      tag: 'form-card',
      tagType: 'layout',
      tagIcon: 'card',
      label: '卡片',
      layoutTree: true,
    },
    children: [],
    allowDrop: true, // 拖拽时判定目标节点能否被放置
    header: '标题',
    shadow: "always",
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    className: [],
    styleObj,
  },
  {
    __config__: {
      tag: 'form-sub',
      tagType: 'layout',
      tagIcon: 'sub',
      label: '子表单',
      layoutTree: true,
    },
    children: [
      {
        label: "第1项",
        value: getUuiKey(),
        children: [],
        allowDrop: true, // 拖拽时判定目标节点能否被放置
      },
    ],
    className: [],
    styleObj,
    maxSize: 10,
    subType: 'form',
    stripe: false,
    size: 'medium',
    showHeader: true,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    // 'highlight-current-row': false
  },

]

// 辅助组件
export let assistComponents = [
  {
    __config__: {
      label: '分割线',
      tag: 'form-divider',
      defaultValue: '分割线',
      tagIcon: 'divider',
      span: 24,
      tagType: 'assist',
    },
    className: [],
    styleObj: { ...styleObj, marginTop: '16px', marginBottom: '16px' },
    icon: '',
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    contentPosition: 'center', // 分割线文案位置
  },
  {
    __config__: {
      label: '说明',
      tag: 'form-remark',
      tagIcon: 'remark',
      defaultValue: '只是一段说明文字',
      span: 24,
      showLabel: true,
      tagType: 'input',
      labelWidth: null,
    },
    icon: 'el-icon-warning-outline', // 图标
    className: [],
    styleObj,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
  },
  {
    __config__: {
      label: '文本',
      tag: 'form-text',
      tagIcon: 'text',
      defaultValue: '文本内容',
      span: 24,
      // showLabel: false,
      tagType: 'assist',
      labelWidth: null,
    },
    className: [],
    styleObj,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
  },
  // {
  //   __config__: {
  //     label: 'HTML',
  //     tag: 'form-html',
  //     tagIcon: 'html',
  //     // defaultValue: '<div style="color:blue">HTML HTML HTML HTML</div>',
  //     // defaultValueHidden: true, // 默认值输入框隐藏
  //     span: 24,
  //     // showLabel: false,
  //     tagType: 'assist',
  //     labelWidth: null,
  //   },
  //   html: `<div style="color:blue">HTML HTML HTML HTML</div>`,
  //   isHide: false, // 是否隐藏
  // isLock: false, // 是否锁定
  //   className: [],
  //   styleObj,
  // },
  {
    __config__: {
      label: '链接',
      tag: 'form-link',
      tagIcon: 'link',
      defaultValue: '默认链接',
      span: 24,
      // showLabel: false,
      tagType: 'assist',
      labelWidth: null,
    },
    href: 'https://gitee.com/deer_bambi_hly/form-generator',
    type: 'primary',
    underline: false,
    disabled: false,
    icon: '',
    target: '_self',
    className: [],
    styleObj,
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
  },
  {
    __config__: {
      label: '标签',
      tag: 'form-tag',
      tagIcon: 'tag',
      defaultValue: '标签',
      span: 24,
      // showLabel: false,
      tagType: 'assist',
      labelWidth: null,
    },
    type: 'primary',
    hit: false, // 是否有边框描边
    // color: '', // 背景色
    // textColor: '',
    effect: 'light', // 主题
    closable: false,
    round: false,
    size: 'medium',
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    className: [],
    styleObj,
  },
  {
    __config__: {
      label: '按钮',
      tag: 'form-button',
      tagIcon: 'button',
      defaultValue: '按钮',
      span: 24,
      // showLabel: false,
      tagType: 'assist',
      labelWidth: null,
    },
    type: 'primary',
    round: false,
    plain: false,
    disabled: false,
    // circle: false,
    size: 'medium',
    icon: '',
    isHide: false, // 是否隐藏
    isLock: false, // 是否锁定
    className: [],
    styleObj,
    event: { eventName: "", onCreated, onMounted, onClick },

  },
  // {
  //   __config__: {
  //     label: '通知栏',
  //     tag: 'form-notice',
  //     tagIcon: 'notice',
  //     defaultValue: '通知栏通知栏通知栏通知栏通知栏通知栏通知栏通知栏通知栏通知栏',
  //     span: 24,
  //     // showLabel: false,
  //     tagType: 'assist',
  //     labelWidth: null,
  //   },
  //   speed: 50, // 滚动速率 (px/s)
  //   closable: false,
  //   icon: 'el-icon-message-solid', // 图标
  //   className: [],
  //   styleObj: { ...styleObj, color: '#FF6600', backgroundColor: '#FFFBE8' },
  // },
  // {
  //   __config__: {
  //     label: '轮播图',
  //     tag: 'form-swipe',
  //     tagIcon: 'swipe',
  //     span: 24,
  //     // showLabel: false,
  //     tagType: 'assist',
  //     labelWidth: null,
  //   },
  //   className: [],
  //   styleObj,
  //   type: 'default', // 走马灯类型
  //   autoplay: true,
  //   // direction: 'horizontal',
  //   interval: 3000, // 自动切换时间
  //   loop: true,
  //   initialIndex: 0,
  //   "dataObj": {
  //     type: 'static',
  //     "url": "",
  //     "method": "get",
  //     "request": {},
  //     "response": "// response 为接口请求成功时返回的数据",
  //     "error": "// error 为接口请求失败时返回的数据",
  //     value: [{
  //       name: '图片1',
  //       // image: 'https://picsum.photos/300/200?1'
  //       path: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
  //     }, {
  //       name: '图片2',
  //       path: 'https://picsum.photos/300/200?2'
  //     }, {
  //       name: '图片3',
  //       path: 'https://picsum.photos/300/200?3'
  //     }, {
  //       name: '图片4',
  //       path: 'https://picsum.photos/300/200?4'
  //     }], // 静态数据
  //   },
  // },
]



export function setConfig(defaultConfig) {
  if (!defaultConfig) return
  if (!Object.keys(defaultConfig).length) return
  // 1. 表单配置
  if (defaultConfig.formConf) formConf = deepClone(defaultConfig.formConf)
  // 2.1 输入型组件 【左面板】
  if (defaultConfig.inputComponents) inputComponents = deepClone(defaultConfig.inputComponents)
  // 2.2 选择型组件 【左面板】
  if (defaultConfig.selectComponents) selectComponents = deepClone(defaultConfig.selectComponents)
  // 2.3 布局型组件 【左面板】
  if (defaultConfig.layoutComponents) layoutComponents = deepClone(defaultConfig.layoutComponents)
  // 2.4 辅助组件
  if (defaultConfig.assistComponents) assistComponents = deepClone(defaultConfig.assistComponents)
}
